import {messages} from "share/common";
/**
 * created by jsq on 2017/11/25
 */
import React from 'react'
import {connect} from 'react-redux'

import {Button, Table, Select, Popover, Badge, message, Form, Spin, Popconfirm, Icon} from 'antd';
import SearchArea from 'components/search-area';
import Chooser from 'components/chooser'
import "styles/budget-setting/budget-organization/budget-item-map/budget-item-map.scss"
import budgetService from 'containers/budget-setting/budget-organization/budget-item-map/budget-item-map.service'
import config from 'config'
import Importer from 'components/template/importer'
import errorMessage from "share/errorMessage";
import menuRoute from "routes/menuRoute";
import ImportModal from "components/template/import-modal-ie/import-modal";
import Skeleton from 'components/skeleton';

const Option = Select.Option;

class BudgetItemMapSetting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      btnLoading: false,
      exportLoading: false,
      data: [],
      sourceType: [],
      showImportFrame: false,
      searchParams: {
        sourceType: "",
        itemId: "",
        orgId: this.props.params.id,
        groupId: this.props.params.groupId
      },
      pagination: {
        current: 0,
        page: 0,
        total: 0,
        pageSize: 10,
      },
      paramValueMap: {},
      columnTypes: [],
      searchForm: [
        {type: 'select', options: [], id: 'sourceType', label: messages('budget-setting.key77'/*来源类别*/)},
        {
          type: 'selector',
          id: 'itemId',
          searchKey: 'itemName',
          selectorType: 'budget_item',
          label: messages('budget-setting.key78'/*预算项目*/),
          searchIfKeywordIsNull: true,
          params: { organizationId: this.props.params.id, isEnabled: true, page: 0, size: 20 },
        },
      ],
      columns: [
        {
          title: messages('budget-setting.key77'/*来源类别*/),
          key: "src",
          dataIndex: 'src',
          render: (text, record, index) => this.renderColumns(text, record, index, 'src')
        },
        {
          title: messages('budget-setting.key79'/*公司*/),
          key: "comp",
          dataIndex: 'comp',
          render: (text, record, index) => this.renderColumns(text, record, index, 'comp')
        },
        {
          title: messages('common.department')/*部门*/,
          key: "unit",
          dataIndex: 'unit',
          render: (text, record, index) => this.renderColumns(text, record, index, 'unit')
        },
        {
          title: messages('budget-setting.key80'/*员工*/),
          key: "impl",
          dataIndex: 'impl',
          render: (text, record, index) => this.renderColumns(text, record, index, 'impl')
        },
        {
          title: messages('budget-setting.key81'/*表单名称*/),
          key: "fname",
          dataIndex: 'fname',
          render: (text, record, index) => this.renderColumns(text, record, index, 'fname')
        },
        {
          title: messages('budget-setting.key82'/*明细类型*/),
          key: "dtype",
          dataIndex: 'dtype',
          render: (text, record, index) => this.renderColumns(text, record, index, 'dtype')
        },
        {
          title: messages('budget-setting.key232')/*报销类型*/,
          key: "rtype",
          dataIndex: 'rtype',
          render: (text, record, index) => this.renderColumns(text, record, index, 'rtype')
        },
        {
          title: messages('budget-setting.key78'/*预算项目*/),
          key: "budgetItemName",
          dataIndex: 'budgetItemName',
          render: (text, record, index) => this.renderColumns(text, record, index, 'budgetItemName')
        },
        {
          title: messages('common.operation'/*操作*/), key: 'operation', width: '15%', render: (text, record, index) => (
            <span>
              <a onClick={record.editStatus ? e => this.save(e, record, index, 'item') : e => this.edit(e, record, index)}>
                {messages(record.editStatus ? "common.save" : "common.edit")}
              </a>
              {record.editStatus ?
                <a style={{marginLeft: 12}}
                   onClick={(e) => this.deleteItem(e, record, index,false)}>{messages('common.cancel')}</a>
                :
                <Popconfirm onConfirm={(e) => this.deleteItem(e, record, index,true)}
                            title={messages('budget-setting.key83'/*你确定要删除这条数据吗？*/)}>{/* 你确定要删除这条数据吗？*/}
                  <a style={{marginLeft: 12}}>{messages('common.delete')}</a>
                </Popconfirm>
              }
            </span>)
        },
      ],
      areaLoading: true
    };
    this.getItemMapping();
  }

  getList = () => {
    let params = Object.assign({}, this.state.searchParams);
    params.page = this.state.pagination.page;
    params.size = this.state.pagination.pageSize;
    this.setState({ loading: true });
    budgetService.getItemMapping(params).then((response) => {
      let pagination = this.state.pagination;
      pagination.total = Number(response.headers['x-total-count']);
      this.setState({
        pagination,
        loading: false,
        btnLoading: false,
        data: response.data
      })
    }).catch(e => {
      this.setState({loading: false});
      errorMessage(e.response)
    })
  };

  getItemMapping() {
    budgetService.getItemMappingByGroupId(this.props.params.groupId).then(res => {
      this.getList();
      let columnTypes = [];
      res.data && res.data.map(item => {
        columnTypes.push(item.itemType)
      })
      columnTypes.push('budgetItemName')
      columnTypes.push('operation')

      let {columns} = this.state;
      columns = columns.filter(item => ~columnTypes.indexOf(item.key))
      this.setState({columns, loading: false, columnTypes: res.data})
    }).catch(e => {
      errorMessage(e.response);
      this.setState({loading: true})
    })
  }

  //保存
  save = (e, record, index, type) => {
    e.preventDefault();
    e.stopPropagation();
    let validTip = messages('budget-setting.key84'/*请填写全部信息*/);
    let validPass = true;
    let {data} = this.state;
    let saveData = [];
    if (type === 'item' && !record.id) {
      record.mappingItems ? record.mappingItems.map(item => {
        if (!item.mappingItemValue) {
          validPass = false;
        }
      }) : validPass = false;
      if (!record.budgetItemIdSelect) {
        validPass = false
      }
      saveData = [record];
    }
    if (type === 'item' && record.id) {
      if (!record.budgetItemId) {
        validPass = false
      }
      saveData = [record];
    }
    if (type === 'all') {
      let saveDataFilter = data.filter(item => item.editStatus);
      let newData = saveDataFilter.filter(item => !item.id)
      let editData = saveDataFilter.filter(item => item.id)
      newData && newData.length > 0 && newData.map(item => {
        item.mappingItems ? item.mappingItems.map(i => {
          if (!i.mappingItemValue) {
            validPass = false;
          }
        }) : validPass = false;
        if (!item.budgetItemIdSelect) {
          validPass = false
        }
      })
      saveData = newData.concat(editData);
    }

    if (validPass) {
      saveData.map(item => {
        if (item.budgetItemIdSelect) {
          item.budgetItemId = item.budgetItemIdSelect;
          item.budgetItemName = item.budgetItemNameSelect
        }
        if (item.prepareInfo) {
          Object.keys(item.prepareInfo).map(attr => {
            item.mappingItems.map(mappingItem => {
              if (item.prepareInfo[attr].mappingItemId === mappingItem.mappingItemId) {
                mappingItem.mappingItemValue = item.prepareInfo[attr].mappingItemValue;
                mappingItem.mappingItemName = item.prepareInfo[attr].mappingItemName;
              }
            })
          })
        }
      })
      this.setState({btnLoading: true})
      budgetService.saveItemMapping(saveData).then(res => {
        this.setState({btnLoading: false})
        message.success(messages('common.operate.success')/*操作成功*/);
        if (type === 'item') {
          data[index] = res.data[0];
          this.setState({data})
        } else {
          this.getList();
        }
      }).catch((e) => {
        this.setState({btnLoading: false})
        if (e.response) {
          message.error(`${messages('common.save.filed')}, ${e.response.data.message}`)
        }
      })
    } else {
      message.warning(validTip);
      return;
    }
  };

  edit = (e, record, index) => {
    e.preventDefault();
    e.stopPropagation();
    let {data} = this.state;
    data[index].editStatus = true;
    data[index].budgetItemIdSelect = null;
    data[index].budgetItemNameSelect = null;
    this.setState({data})
  };

  //删除
  deleteItem = (e, record, index,type=true) => {
    e.preventDefault();
    e.stopPropagation();
    let param = [record.id];

    let deleteSuccess = () => {
      let {data} = this.state;
      data.delete(data[index]);
      this.setState({
        data,
        pagination: {
          ...this.state.pagination,
          pageSize: this.state.pagination.pageSize - 1 >= 10 ? this.state.pagination.pageSize - 1 : 10,
          total: this.state.pagination.total - 1,
        }
      });
    };
    if (!type && record.id) {
      let {data} = this.state;
      data[index].editStatus = false;
      this.setState({data})
      return;
    }
    record.id ? budgetService.deleteItemMap(param).then((response) => {
      message.success(`${messages('common.operate.success')}`);
      deleteSuccess();
    }).catch((e) => {
      if (e.response) {
        message.error(`${messages('common.operate.filed')},${e.response.data.message}`)
      }
    }) : deleteSuccess();

  };

  componentWillMount() {
    //获取来源类别值列表
    const { groupId } = this.props.params;
    const getValues = this.getSystemValueList(2027);
    const getConditions = budgetService.getHeaderCondition(groupId);
    Promise.all([getValues, getConditions])
      .then(res => {
        const [values, conditions] = res;
        this.handleValues(values);
        this.handleConditions(conditions);
      })
      .catch(err => {
        errorMessage(err.response);
      })
      .finally(() => {
        this.setState({ areaLoading: false });
      });
  }

  handleConditions = (conditions) => { // 动态根据接口的值来确定查询条件
    let { searchForm } = this.state;
    const { setOfBooksId } = this.props.organization;
    conditions.data.forEach(item => {
      let params = { type: 'list', single: true, valueKey: 'id', label: item.itemName };
      if (item.itemType === 'dtype') {
        params.listType = 'invoice_budget';
        params.labelKey = 'name';
        params.id = 'dtypeId';
        params.listExtraParams = { setOfBooksId, enabled: true };
        searchForm.splice(searchForm.length - 1, 0, params);
        return;
      }
      if (item.itemType === 'fname') {
        params.listType = 'form_budget';
        params.labelKey = 'formName';
        params.id = 'docId';
        params.listExtraParams = {
          setOfBooksId,
          withSetOfBooks: true,
          budgetEnable: true,
          valid: true,
        };
        searchForm.splice(searchForm.length - 1, 0, params);
        return;
      }
      if (item.itemType === 'impl') {
        params.listType = 'user';
        params.labelKey = 'fullName';
        params.id = 'employeeId';
        searchForm.splice(searchForm.length - 1, 0, params);
        return;
      }
      if (item.itemType === 'unit') {
        params.listType = 'journal_line_department';
        params.id = 'unitId';
        params.labelKey = 'name';
        searchForm.splice(searchForm.length - 1, 0, params);
        return;
      }
      if (item.itemType === 'comp') {
        params.listType = 'company_budget';
        params.labelKey = 'name';
        params.id = 'companyId';
        params.listExtraParams = { setOfBooksId };
        searchForm.splice(searchForm.length - 1, 0, params);
        return;
      }
      if (item.itemType === 'rtype') {
        params.type = 'select';
        params.labelKey = 'messageKey';
        params.options = [];
        params.method = 'get';
        params.valueKey = 'code';
        params.listKey = 'values';
        params.getUrl = '/api/custom/enumeration/system/by/type?systemCustomEnumerationType=1018';
        params.id = 'rtypeCode';
        searchForm.splice(searchForm.length - 1, 0, params);
      }
    });
    this.setState({ searchForm });
  };

  handleValues = (values) => {
    let sourceType = [];
    let { searchForm } = this.state;
    values.data.values.map((item) => {
      let option = {
        value: item.code,
        label: item.messageKey
      };
      sourceType.push(option);
    });
    searchForm[0].options = sourceType;
    this.setState({ searchForm, sourceType });
  };

  handleSearch = (values) => {
    let searchParams = this.state.searchParams;
    searchParams.sourceType = values.sourceType === undefined ? "" : values.sourceType;
    searchParams.itemId = values.itemId === undefined ? "" : values.itemId;
    searchParams.companyId = values.companyId === undefined ? "" : values.companyId[0];
    searchParams.docId = values.docId === undefined ? "" : values.docId[0];
    searchParams.employeeId = values.employeeId === undefined ? "" : values.employeeId[0];
    searchParams.unitId = values.unitId === undefined ? "" : values.unitId[0];
    searchParams.rtypeCode = values.rtypeCode === undefined ? "" : values.rtypeCode;
    searchParams.dtypeId = values.dtypeId === undefined ? "" : values.dtypeId[0];
    this.setState({
      searchParams,
      loading: true,
      pagination: {
        ...this.state.pagination,
        pageSize: 10,
        page: 0,
        current: 1
      }
    }, () => {
      this.getList()
    })
  };

  //分页点击
  onChangePager = (pagination, filters, sorter) => {
    let temp = this.state.pagination;
    temp.page = pagination.current - 1;
    temp.current = pagination.current;
    temp.pageSize = 10;
    this.setState({
      pagination: temp
    }, () => {
      this.getList();
    })
  };

  handleSingleSelectOnchange = (values, index, columnType) => {
    let {columnTypes, data} = this.state;
    let columnInfo = columnTypes.filter(item => item.itemType === columnType)[0]
    data && data.length > 0 && data[index].mappingItems.map(item => {
      if (item.mappingItemId === columnInfo.id) {
        if (data[index].prepareInfo) {
          if (!data[index].prepareInfo[columnType]) {
            data[index].prepareInfo[columnType] = {
              mappingItemId: columnInfo.id,
              mappingItemValue: values.value,
              mappingItemName: values.name
            }
          }
          else {
            if (data[index].prepareInfo[columnType].mappingItemValue == values.value) {
              return;
            }
            data[index].prepareInfo[columnType].mappingItemValue = values.value;
            data[index].prepareInfo[columnType].mappingItemName = values.name;
          }
        }
        else {
          data[index].prepareInfo = {};
          data[index].prepareInfo[columnType] = {
            mappingItemId: columnInfo.id,
            mappingItemValue: values.value,
            mappingItemName: values.name
          }
        }
        if (!data[index].id) {
          item.mappingItemValue = values.value;
          item.mappingItemName = values.name;
        }
        this.setState({data})
      }

    })
  }
  handleBudgetItemNameOnchange = (record, index) => {
    let {data} = this.state;
    if (data && data.length > 0) {
      data[index].budgetItemIdSelect = record.value;
      data[index].budgetItemNameSelect = record.name;
    }
  }
  getBudgetItemName = (record, index, columnType) => {
    let {columnTypes, data} = this.state;
    let columnInfo = columnTypes.filter(item => item.itemType === columnType)[0];
    let info = {};
    columnInfo && data && data.length > 0 && data[index].mappingItems.map(item => {
      if (item.mappingItemId === columnInfo.id) {
        info = item;
      }
    })
    return info;
  }

  //获取新的列初始化数据源
  getNewBudgetItemInitData() {
    let {columnTypes} = this.state;
    let {id, groupId} = this.props.params;
    let initData = {};
    initData.budgetOrganizationId = id;
    initData.groupId = groupId;
    initData.editStatus = true
    initData.mappingItems = [];
    columnTypes.map(item => {
      initData.mappingItems.push({mappingItemId: item.id})
    })
    return initData;
  }

  //根据列的类型获取列的选中值
  getSelectInfoByColumnType = (record, columnType) => {
    if (columnType === 'budgetItemName') {
      return {};
    }
    let {columnTypes} = this.state;
    let selectInfo = {};
    let columnInfo = columnTypes.length > 0 ? columnTypes.filter(item => item.itemType === columnType)[0] : {};
    if (!columnInfo) {
      return {};
    }
    if (record.mappingItems.filter(item => columnInfo && item.mappingItemId === columnInfo.id)[0].mappingItemValue) {
      selectInfo = record.mappingItems.filter(item => columnInfo && item.mappingItemId === columnInfo.id)[0];
    }
    if (record.prepareInfo && record.prepareInfo[columnType] && record.prepareInfo[columnType].mappingItemValue) {
      selectInfo = record.prepareInfo[columnType];
    }
    if (!selectInfo) {
      return {}
    }
    else {
      return selectInfo;
    }
  }

  renderColumns = (decode, record, index, columnType) => {
    const { organization } = this.props;
    const { sourceType, columnTypes } = this.state;
    if (!record.editStatus) {
      let content = '';
      if (columnType === 'budgetItemName') {
        content = record.budgetItemName;
      }else{
        content = this.getBudgetItemName(record, index, columnType).mappingItemName;
      }
      return (<Popover content={content}>{content}</Popover>);
    }
    let disabled = true;
    let srcColumnInfo = columnTypes.length > 0 ? (columnTypes.filter(item => item.itemType === 'src')[0] || {}) : {};
    if ((record.prepareInfo && record.prepareInfo.src) ||
      (record.mappingItems.filter(item => item.mappingItemId === srcColumnInfo.id)[0] || {}).mappingItemValue) {
      disabled = false;
    }
    let selectInfo = {};
    if (columnType === 'budgetItemName') {
      if (record.budgetItemIdSelect) {
        selectInfo.value = record.budgetItemIdSelect;
        selectInfo.name = record.budgetItemNameSelect;
      } else {
        selectInfo.value = record.budgetItemId;
        selectInfo.name = record.budgetItemName;
      }
    } else {
      if (record.prepareInfo && record.prepareInfo[columnType]) {
        selectInfo.value = record.prepareInfo[columnType].mappingItemValue;
        selectInfo.name = record.prepareInfo[columnType].mappingItemName;
      }
      if (!selectInfo.value) {
        let columnInfo = columnTypes.length > 0 ? columnTypes.filter(item => item.itemType === columnType)[0] : {};
        let mappingItem = record.mappingItems.filter(item => item.mappingItemId === columnInfo.id)[0]
        selectInfo.value = mappingItem.mappingItemValue;
        selectInfo.name = mappingItem.mappingItemName;
      }
    }

    if (columnType === 'src') {
      return (
        <Select
          placeholder={messages('common.please.select')}
          value={selectInfo.value}
          onChange={value => this.handleSingleSelectOnchange({
            value: value,
            name: sourceType.filter(item => item.value === value)[0].label
          }, index, columnType)}
          notFoundContent={<Spin size="small"/>}
        >
          {sourceType.map(option => <Option key={option.value}>{option.label}</Option>)}
        </Select>
      )
    } else {
      let chooserConfig = {
        comp: {
          type: 'company_budget',
          labelKey: 'name',
          valueKey: 'id',
          listExtraParams: {setOfBooksId: organization.setOfBooksId},
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].name
            } : {}, index, columnType)
          }
        },
        unit: {
          type: 'journal_line_department',
          labelKey: 'name',
          valueKey: 'id',
          listExtraParams: {},
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].name
            } : {}, index, columnType)
          }
        },
        impl: {
          type: 'user',
          labelKey: 'fullName',
          valueKey: 'id',
          listExtraParams: {roleType: 'TENANT'},
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].fullName
            } : {}, index, columnType)
          }
        },
        fname: {
          type: 'form_budget',
          labelKey: 'formName',
          valueKey: 'id',
          listExtraParams: {
            setOfBooksId: organization.setOfBooksId,
            withSetOfBooks: true,
            budgetEnable: true,
            valid: true,
            companyId: this.getSelectInfoByColumnType(record, 'comp').mappingItemValue,
            entityType: this.getSelectInfoByColumnType(record, 'src').mappingItemValue === 'EXPENSE_TYPE' ? '1002' :
              this.getSelectInfoByColumnType(record, 'src').mappingItemValue === 'APPLICATION_TYPE' ? '1001' : null
          },
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].formName
            } : {}, index, columnType)
          }
        },
        dtype: {
          type: 'invoice_budget',
          labelKey: 'name',
          valueKey: 'id',
          listExtraParams: {setOfBooksId: organization.setOfBooksId, enabled: true},
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].name
            } : {}, index, columnType)
          }
        },
        budgetItemName: {
          type: 'budget_item',
          labelKey: 'itemName',
          valueKey: 'id',
          listExtraParams: {organizationId: this.props.params.id, isEnabled: true},
          onChange: value => {
            this.handleBudgetItemNameOnchange(value && value.length > 0 ? {
              value: value[0].id,
              name: value[0].itemName
            } : {}, index)
          }
        },
        rtype: {
          type: 'reimbursemen_type',
          labelKey: 'messageKey',
          valueKey: 'code',
          listExtraParams: {systemCustomEnumerationType: 1018, isAll: false},
          onChange: value => {
            this.handleSingleSelectOnchange(value && value.length > 0 ? {
              value: value[0].code,
              name: value[0].messageKey
            } : {}, index, columnType)
          }
        }
      };
      let chooserValue = selectInfo.value ?
        [{
          [chooserConfig[columnType].labelKey]: selectInfo.name,
          [chooserConfig[columnType].valueKey]: selectInfo.value
        }] : undefined;
      return (
        <Chooser
          placeholder={messages('common.please.select')}
          type={chooserConfig[columnType].type}
          labelKey={chooserConfig[columnType].labelKey}
          valueKey={chooserConfig[columnType].valueKey}
          value={chooserValue}
          single
          showClear={false}
          disabled={disabled}
          listExtraParams={chooserConfig[columnType].listExtraParams}
          onChange={chooserConfig[columnType].onChange}
        />
      )
    }
  };

  handleAdd = () => {
    let {data} = this.state;
    data.push(this.getNewBudgetItemInitData());
    this.setState({
      data
    }, () => {
      this.setState({
        pagination: {
          ...this.state.pagination,
          pageSize: this.state.data.length >= 10 ? this.state.data.length : 10,
          total: this.state.pagination.total + 1
        }
      })
    });
  };

  showImport = (flag) => {
    this.setState({showImportFrame: flag})
  };

  //导入成功回调
  handleImportOk = () => {
    this.showImport(false);
    this.getList()
  };

  //导出明细数据
  handleExport = () => {
    const { groupId } = this.props.params;
    this.setState({ exportLoading: true });
    budgetService.exportItemMap(groupId).then(res => {
      this.setState({ exportLoading: false });
      window.open(res.data.fileURL)
    }).catch(e => {
      errorMessage(e.response);
      this.setState({ exportLoading: false })
    })
  };

  //返回项目目映射
  handleBack = () => {
    this.context.router.push(menuRoute.getMenuItemByAttr('budget-organization', 'key').children.budgetOrganizationDetail.url.replace(':id', this.props.params.id) + '?tab=ITEM_MAP');
  };

  render() {
    const { groupId } = this.props.params;
    const { areaLoading, loading, searchForm, data, pagination, columns, btnLoading, showImportFrame, exportLoading } = this.state;
    return (
      <div className="budget-item-map">
        <Skeleton loading={areaLoading}>
          <SearchArea searchForm={searchForm} submitHandle={this.handleSearch}/>
        </Skeleton>
        <div className="table-header">
          <div className="table-header-title">{messages('common.total', {total: `${pagination.total}`})}</div>
          {/*共搜索到*条数据*/}
          <div className="table-header-buttons">
            <Button type="primary" onClick={this.handleAdd}>{messages('common.add')}</Button> {/*添加*/}
            {/*<Button type="primary" disabled={false}
                    onClick={() => this.showImport(true)}>{messages('importer.import')}</Button>*/} {/*导入*/}
            <Importer visible={showImportFrame}
                      title={messages('budget-setting.key88'/*预算项目映射导入*/)}
                      templateUrl={`${config.budgetUrl}/api/budget/itemsMapping/export/template`}
                      uploadUrl={`${config.budgetUrl}/api/budget/itemsMapping/import?orgId=${this.props.params.id}`}
                      errorUrl={`${config.budgetUrl}/api/budget/itemsMapping/export/failed/data`}
                      downFileName={messages('budget-setting.key89'/*预算项目映射导入文件*/)}
                      onOk={this.handleImportOk}
                      afterClose={() => this.showImport(false)}/>
            <Button type="primary" loading={btnLoading}
                    disabled={data.length === 0 || !(data.length > 0 && data.filter(item => item.editStatus).length > 0)}
                    onClick={e => this.save(e, {}, 0, 'all')}>{messages('common.save')/*保存*/}</Button>
            <ImportModal
              buttonName={messages('budget-setting.key229')/*导入数据*/}
              templates={[{
                downloadName: messages('budget-setting.key230')/*预算项目映射模板*/,
                templateName: messages('budget-setting.key230')/*预算项目映射模板*/,
                downloadUrl: `/budget-service/api/budget/itemsMapping/export/template?groupId=${groupId}`,
                downloading: "downloading"
              }]}
              uploadUrl={`${config.baseUrl}/budget-service/api/budget/itemsMapping/import?groupId=${groupId}`}
              exportErrUrl={config.baseUrl + '/budget-service/api/budget/itemsMapping/export/failed/data/' + groupId +'/${transactionOID}'}
              uploadAsync
              hasErrInfo
              onCancel={this.getList}
            />
            <Button loading={exportLoading} onClick={this.handleExport}>{messages('budget-setting.key231')/*导出明细数据*/}</Button>
          </div>
        </div>
        <Form
          className="ant-advanced-search-form">
          <Table
            dataSource={data}
            rowKey="id"
            columns={columns}
            loading={loading}
            onChange={this.onChangePager}
            pagination={pagination}
            bordered
            size="middle"/>
        </Form>
        <a style={{fontSize: '14px', paddingBottom: '20px'}} onClick={this.handleBack}><Icon
          type="rollback"
          style={{marginRight: '5px'}}/>{messages('common.back')}
        </a>
      </div>
    )
  }

}

BudgetItemMapSetting.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(BudgetItemMapSetting);


